<template>

    <view class="nickName">
        <view>
            <input class="uni-input" placeholder="请输入新昵称名" confirm-type="done" @blur="blur" type="nickname"
                placeholder-style="color: #F5F5F5;" v-model="nickname" />
        </view>
        <button form-type="submit" @tap="submitForm" class="uni-buttons">保存</button>
    </view>
</template>

<script>
import {
    mapState,
    mapMutations
} from 'vuex'
import { editUserInfo } from '@/api/api'
export default {
    data() {
        return {
            nickname: ''
        }
    },
    computed: {
        ...mapState(['user'])
    },
    methods: {
        ...mapMutations('user', ['changeNickName']),
        blur(e) {
            this.nickname = e.detail.value
        },
        submitForm(e) {
            if (!this.nickname) {
                return uni.showToast({
                    title: '请输入昵称',
                    icon: 'none'
                })
            }
            let params = {
                nickname: this.nickname,
                mobile: this.user.mobile,
                avatar: this.user.avatar
            }
            editUserInfo(params).then(res => {
                if (res.code == 1) {
                    this.changeNickName(this.nickname)
                    uni.navigateBack()
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            })
        }
    },
}
</script>

<style lang="scss">
page {
    background-color: #ffffff;
}

.nickName {
    position: relative;
    padding: 30upx;
    height: 100vh;

    .uni-input {
        font-size: 26upx;
        background-color: #F5F5F5;
        border-radius: 6px;
        padding: 24upx 20upx;
    }

    .uni-buttons {
        position: absolute;
        bottom: 180upx;
        left: 0;
        right: 0;
        background-color: #359BEF;
        color: #ffffff;
        border-radius: 40px;
        margin: 0 30upx;
        font-size: 30upx;
    }
}
</style>